<template>
  <div class="relative">
    <el-image
      class="h-[80px] max-w-[180px] border border-gray-300"
      :src="videoImgSrc"
      fit="contain"
    />
    <div
      class="absolute h-full w-full left-0 top-0 flex items-center justify-center cursor-pointer"
      @click="handleShowVideoPlayer"
    >
      <Play class="h-[40%] w-[40%]" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { addDialog } from '@/components/ReDialog'
import Play from '@/assets/svg/play.svg?component'
import VideoPlayer from './VideoPlayer.vue'
import { onMounted, ref } from 'vue'

const props = defineProps({
  videoUrl: {
    type: String,
    required: true
  }
})

const handleShowVideoPlayer = () => {
  addDialog({
    class: 'bg-black-dialog',
    contentRenderer: () => VideoPlayer,
    props: {
      src: props.videoUrl
    },
    hideFooter: true,
    showClose: false
  })
}
const videoImgSrc = ref('')

onMounted(() => {
  const video = document.createElement('video')
  video.src = props.videoUrl
  video.addEventListener('loadeddata', () => {
    // 跳转第一帧
    video.currentTime = 0
  })
  video.addEventListener('seeked', () => {
    // 获取第一帧图片
    const canvas = document.createElement('canvas')
    canvas.width = video.videoWidth
    canvas.height = video.videoHeight
    canvas.getContext('2d')?.drawImage(video, 0, 0, canvas.width, canvas.height)
    videoImgSrc.value = canvas.toDataURL()
  })
  video.load()
})
</script>

<style scoped></style>
